<template>
  <div class="company-edit">
    <div class="header">
      <div class="left"></div>
      <div class="right">我的公司管理</div>
    </div>

    <div class="content">
      <div class="breadcrumb-head">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home/meCompanyManagement' }"
            >我的公司管理</el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><a href="home/meCompanyManagement">新增公司</a></el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>

      <div class="base-title">基本信息</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="name">
              <el-input v-model="ruleForm.name" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国别地区" prop="Area">
              <el-select v-model="ruleForm.Area" placeholder="请选择国别地区" :disabled="disabled">
                <el-option label="国内" value="shanghai"></el-option>
                <el-option label="国外" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="公司类型" prop="companyType">
              <el-select
                v-model="ruleForm.companyType"
                placeholder="请选择公司类型"
                :disabled="disabled"
              >
                <el-option label="终端" value="shanghai"></el-option>
                <el-option label="贸易" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业性质" prop="Natrue">
              <el-select v-model="ruleForm.Natrue" placeholder="请选择企业性质" :disabled="disabled">
                <el-option label="国有企业" value="shanghai"></el-option>
                <el-option label="国有控股" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industry">
              <el-select
                v-model="ruleForm.industry"
                placeholder="请选择公司类型"
                :disabled="disabled"
              >
                <el-option label="终端" value="shanghai"></el-option>
                <el-option label="贸易" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网址" prop="site">
              <el-input v-model="ruleForm.site" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="主要产品" prop="product">
          <el-input v-model="ruleForm.product" :disabled="disabled"></el-input>
        </el-form-item>

        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="证照上传" prop="pictrueIds">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  （仅支持jpg、png、gif、pdf格式上传，大小不超过5M）
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="base-title">工商信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="Uscc">
              <el-input v-model="ruleForm.Uscc" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="法人代表" prop="Corperation">
              <el-input v-model="ruleForm.Corperation" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工人数" prop="Employees">
              <el-input v-model="ruleForm.Employees" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="公司成立日期" prop="RegistDate">
              <el-date-picker
                v-model="ruleForm.RegistDate"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营状态" prop="BusinessState">
              <el-input v-model="ruleForm.BusinessState" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注册币种" prop="RegistCurrency">
              <el-select
                v-model="ruleForm.RegistCurrency"
                placeholder="请选择注册币种"
                :disabled="disabled"
              >
                <el-option label="人民币" value="shanghai"></el-option>
                <el-option label="美元" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册资金" prop="RegistFund">
              <el-input v-model="ruleForm.RegistFund" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="注册地址" prop="companyRegisteredAddress">
          <el-input v-model="ruleForm.companyRegisteredAddress" :disabled="disabled"></el-input>
        </el-form-item>

        <el-form-item label="经营范围" prop="BusinessScope">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="ruleForm.BusinessScope"
            :rows="10"
            :disabled="disabled"
          >
          </el-input>
        </el-form-item>

        <el-form-item class="footer">
          <el-button style="" @click="submitForm('ruleForm')">保存</el-button>
          <el-button style="width: 121px" @click="resetForm('ruleForm')"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import FileUploader from "@/components/FileUploader";
export default {
  components: {
    FileUploader,
  },
  data() {
    return {
      disabled:false,
      ruleForm: {
        name: "", //公司名称
        Area: "", //国别地区
        companyType: "", //公司类型
        Natrue: "", //企业性质
        industry: "", //所属行业
        site: "", //网址
        product: "", //主要产品
        pictrueIds: [], //上传文件
        //  工商信息
        Uscc: "", //统一社会信用代码
        Corperation: "", //法人代表
        Employees: "", //员工人数，
        RegistDate: "", //公司成立日期
        BusinessState: "", //经营状态
        RegistCurrency: "", //注册币种
        RegistFund: "", //注册资金
        companyRegisteredAddress: "", //注册地址
        BusinessScope: "", //经营范围
      },
      rules: {
        name: [{ required: true, message: "请填写公司信息", trigger: "blur" }],
        Area: [
          { required: true, message: "请选择国别地区", trigger: "change" },
        ],
        companyType: [
          { required: true, message: "请选择公司类型", trigger: "change" },
        ],
        Natrue: [
          { required: true, message: "请选择企业性质", trigger: "change" },
        ],
        industry: [
          { required: true, message: "请选择所属行业", trigger: "change" },
        ],
        Uscc: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        Corperation: [
          { required: true, message: "请输入法人代表", trigger: "blur" },
        ],
        RegistDate: [
          { required: true, message: "请输入公司成立日期", trigger: "blur" },
        ],
        BusinessState: [
          { required: true, message: "请输入经营状态", trigger: "blur" },
        ],
        RegistFund: [
          { required: true, message: "请输入注册资金", trigger: "blur" },
        ],
        RegistCurrency: [
          { required: true, message: "请输入注册币种", trigger: "blur" },
        ],
        currency: [
          { required: true, message: "请选择币种", trigger: "change" },
        ],
        companyRegisteredAddress: [
          { required: true, message: "注册地址", trigger: "blur" },
          {
            min: 1,
            max: 1000,
            message: "长度在 1 到 1000 个字符",
            trigger: "blur",
          },
        ],
        BusinessScope: [
          { required: false, message: "经营范围", trigger: "blur" },
          {
            min: 1,
            max: 1000,
            message: "长度在 1 到 1000 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.company-edit {
  width: 95%;
  margin: 0 auto;
  height: calc(100vh - 100px);
  // background-color: pink;
  .header {
    display: flex;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }

  .content {
    background-color: #ffffff;
    height: 95%;
    // overflow: auto;
    border-radius: 5px;
    // background-color: pink;
    // box-shadow: 0px 0px 1px rgba(0,0,0,0.1),0px 0px 3px rgba(0,0,0,0.1) inset;

    .breadcrumb-head {
      height: 60px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
    }
  }
}

.base-title {
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
    sans-serif;
  font-weight: 650;
  font-style: normal;
  text-align: left;
  margin: 15px;
}

.el-form-item {
  margin-right: 0 !important;
}
.el-form-item__label {
  position: absolute;
}
.el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-select,
.el-input_inner {
  width: 100%;
}
.footer {
  text-align: center;
  margin-bottom: 10px;
  button:first-child {
    width: 121px;
    background-color: rgb(68, 42, 141);
    color: #ffffff;
  }
}
</style>
